In this tutorial, we will learn how to change the URL without reloading the page using JavaScript’s window history object pushState method. This method allows you to modify the URL without reloading the page.
Vue Js Modify URL Without Reloading The Page Example
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
url: ''
};
},
mounted() {
const initialURL = window.location;
this.url = `Current Url: ${initialURL}`
},
methods: {
updateURL() {
const newURL = '/new-url';
window.parent.history.pushState({}, '', newURL);
const changedUrl = window.parent.location;
this.url = `Changed Url: ${changedUrl}`
},
}
});
</script>
Output of Vue Update Url Without Navigating
Before Chnage Url
After Change Url